<template>
  <a-modal
    :title='title'
    :width='1200'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <a-spin tip='Loading...' :spinning='loading'>
      <a-row :gutter='10' style='background-color: #ececec; padding: 10px; margin:0px;box-sizing: border-box'
             v-if='visible'>
        <a-col :md='24' :sm='24'>
          <a-card :bordered='false'>
            <a-form layout='inline' @keyup.enter.native='searchQuery'>
              <a-row :gutter='24'>
                <a-col :xl='7' :lg='6' :md='6' :sm='24'>
                  <a-form-item label='费用预算类型' :labelCol='{
                  xs: { span: 24 },
                  sm: { span: 8 }
                  }'
                               :wrapperCol='{
                  xs: { span: 24 },
                  sm: { span: 16 }
                  }' style='display: block'>
                    <cn-dict-select-tag placeholder='请选择费用类型' dict-code='budget_type' v-model='queryParam.budgetType' />
                  </a-form-item>
                </a-col>
                <a-col :xl='7' :lg='6' :md='6' :sm='24'>
                  <a-form-item label='费用预算编码'>
                    <a-input placeholder='请输入编码' v-model='queryParam.budgetCode'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl='7' :lg='6' :md='6' :sm='24'>
                  <a-form-item label='经销商名称'>
                    <a-input placeholder='请输入经销商名称' v-model='queryParam.custName'></a-input>
                  </a-form-item>
                </a-col>
                <div style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
                  <a-col :xl='4' :lg='6' :md='6' :sm='24'>
                    <a-button type='primary' @click='onSearch' icon='search'>查询</a-button>
                  </a-col>
                </div>
              </a-row>
            </a-form>
            <a-table
              ref='table'
              size='middle'
              bordered
              :scroll="{
              x:'max-content'
            }"
              rowKey='id'
              :columns='columns'
              :dataSource='dataSource'
              :pagination='ipagination'
              :loading='loading'
              :customRow='multiple ? onClickRow : onSingleClickRow'
              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: multiple ? 'checkbox':'radio'}"
              @change='handleTableChange'
            >
              <template slot='amount' slot-scope='text, record,index'>
                <span>{{ text }}</span>
              </template>
              <template slot='mainBudget' slot-scope='text, record, index' v-if='false'>
                {{ text }}
              </template>
              <template slot='imgUrl' slot-scope='text, record, index'>
                <div class='anty-img-wrap'>
                  <a-avatar shape='square' :src='record.imgUrl' icon='user' />
                </div>
              </template>

              <template slot='status' slot-scope='text'>{{ text | isActiveStatus }}</template>
            </a-table>

          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { filterObj } from '@/utils/util'
import { getAction, postAction } from '@/api/manage'
import { pick } from 'lodash'

export default {
  name: 'selectBudgetInfo',
  mixins: [PageListMixin],
  props: {},
  data() {
    return {
      multiple: false,
      title: '预算选择',
      confirmLoading: false,
      visible: false,
      budgets: [],
      columns: [
        {
          title: '序号',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '预算编码',
          align: 'center',
          dataIndex: 'budgetCode'
        },
        {
          title: '预算科目',
          align: 'center',
          dataIndex: 'budgetSubjectsName'
        },
        {
          title: '预算类型',
          align: 'center',
          dataIndex: 'budgetTypeStr'
        },
        {
          title: '对象',
          align: 'center',
          dataIndex: 'budgetOrgName'
        },
        {
          title: '可用余额',
          align: 'center',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '年份',
          align: 'center',
          dataIndex: 'budgetYear'
        },
        {
          title: '季度',
          align: 'center',
          dataIndex: 'budgetQuarter'
        },
        {
          title: '月份',
          align: 'center',
          dataIndex: 'budgetMonth'
        },
        {
          title: '商品层级',
          align: 'center',
          dataIndex: 'productLevelName'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'productName'
        }
      ],
      url: {
        list: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/findTransferInPageList'
      }
    }
  },
  computed: {},
  created() {

  },
  methods: {
    edit(record) {
      this.visible = true
      this.loadData()
    },

    onSearch() {
      this.loadData(1)
    },

    /**
     * 覆盖mixin的loadData方法
     * @param arg
     * @returns {Promise<void>}
     */
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }

      this.loading = true
      let params = this.getQueryParams()//查询条件
      await postAction(this.url.list, { ...params }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handleCancel() {
      this.selectedRowKeys = []
      this.selectionRows = []
      delete this.queryParam.budgetType
      delete this.queryParam.budgetCode
      this.visible = false
    },
    handleOk() {
      const that = this
      if (this.selectedRowKeys.length <= 0) {
        this.$message.error('请选择一条数据')
        return
      }
      this.$emit('ok', this.selectedRowKeys, this.selectionRows)
      this.handleCancel()
    }
  }
}
</script>

<style scoped>

</style>
